<template>
  <!-- 日志详情 -->
  <el-dialog
    :title="dataDialog.title" 
    :modelValue="props.show"
    @update:modelValue="emit('update:show', $event)"
    width="900px"
  >
    <div>
      //TODO code预览，代码查找，报错位置提取
    </div>
    <div>
      {{ props.info.message }}
    </div>
    <h4>关键代码：</h4>
    <div>
      {{ props.info.message.match(/\(.*\/(.*?\.vue:\d*?:\d*?)\)/)?.[1] }}
    </div>
    <template #footer>
      <el-button type="primary" @click="dataDialog.submit">确定</el-button>
      <el-button @click="dataDialog.cancel">取消</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { shallowReactive } from 'vue';

const props = defineProps({
  show: {
    type: Boolean,
    required: true,
  },
  info: {
    type: Object,
    required: true,
  },
})

const emit = defineEmits<{
  (e: 'update:show', val: boolean): void
}>();

///////////////////////////////// 日志详情 ///////////////////////////////
const dataDialog = shallowReactive({
  title: '日志详情',
  submit: () => {
    
  },
  cancel: () => {
    emit('update:show', false);
  },
});

</script>

<style lang="scss" scoped>

</style>
